<template>
  <div class="hospital-detail-container">
    <!-- 页面标题 -->
    <h2 class="page-title">医院详情</h2>

    <!-- 医院基本信息区 -->
    <div class="hospital-basic-info">
      <div class="left-section">
        <!-- 医院名称 -->
        <div class="info-item">
          <span class="label">医院名称：</span>
          <span class="value">{{ hospitalInfo.name }}</span>
        </div>

        <!-- 医院头像 -->
        <div class="info-item">
          <span class="label">医院头像：</span>
          <el-avatar :size="80" :src="hospitalInfo.logo">
            <span v-if="!hospitalInfo.logo" class="avatar-placeholder">+</span>
          </el-avatar>
        </div>

        <!-- 医院地址 -->
        <div class="info-item">
          <span class="label">医院地址：</span>
          <span class="value">{{ hospitalInfo.address }}</span>
        </div>

        <!-- 医院类型 -->
        <div class="info-item">
          <span class="label">医院类型：</span>
          <el-tag type="primary">{{ hospitalInfo.type|| '公立医院' }}</el-tag>
        </div>

        <!-- 医院等级 -->
        <div class="info-item">
          <span class="label">医院等级：</span>
          <span class="value" >{{ hospitalInfo.level}}</span>
        </div>

        <!-- 医院科室 -->
        <div class="info-item">
          <span class="label">医院科室：</span>
          <div class="departments">
            <div v-for="(dept, index) in hospitalInfo.departments" :key="index" class="department-item">
              <span class="dept-name">{{ dept.name || '暂无'}}：</span>
              <span  class="dept-intro">{{ dept.intro || '暂无' }}</span>
            </div>
          </div>
        </div>

        <!-- 服务标签 -->
        <div class="info-item">
          <span class="label">服务标签：</span>
          <div class="service-tags">
            <el-tag
                v-for="(tag, index) in hospitalInfo.serviceTags"
                :key="index"
                type="info"
                size="small"
                class="tag-item"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 医院简介 -->
      <div class="right-section">
        <div class="info-item">
          <span class="label">医院简介：</span>
          <div class="hospital-intro">
            <p v-for="(paragraph, index) in hospitalInfo.description" :key="index">
              {{ paragraph }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-buttons">
      <el-button @click="goBack">返回列表</el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from "axios";
import {useRoute} from "vue-router";
const route = useRoute()
const router = useRouter()

// 医院信息数据
const hospitalInfo = ref({})
const gethospitalInfo=()=>{
  axios.get(`/hospital/getHospitalDetail/${route.params.id}`).then(res=>{
    hospitalInfo.value = res.data.obj;
    ElMessage.success("获取成功！！！")
  })
}
// 获取医院详情

onMounted(()=>{
  gethospitalInfo()
})
// 返回列表
const goBack = () => {
  router.push('/hospital')
}
</script>

<style scoped>
.hospital-detail-container {
  padding: 20px;
  background-color: #fff;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.hospital-basic-info {
  display: flex;
  gap: 30px;
}

.left-section {
  flex: 0 0 400px;
}

.right-section {
  flex: 1;
}

.info-item {
  margin-bottom: 20px;
}

.label {
  font-weight: bold;
  color: #666;
  display: inline-block;
  width: 80px;
  vertical-align: top;
}

.value {
  display: inline-block;
  width: calc(100% - 90px);
}

.avatar-placeholder {
  font-size: 30px;
  color: #fff;
  line-height: 80px;
}

.departments {
  display: inline-block;
  width: calc(100% - 90px);
}

.department-item {
  margin-bottom: 8px;
}

.dept-name {
  font-weight: 500;
  color: #555;
}

.service-tags {
  display: inline-block;
  width: calc(100% - 90px);
}

.tag-item {
  margin-right: 8px;
  margin-bottom: 8px;
}

.hospital-intro {
  display: inline-block;
  width: calc(100% - 90px);
  line-height: 1.8;
  color: #555;
}

.hospital-intro p {
  margin-bottom: 15px;
  text-align: justify;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}
</style>